<template>
  <div>
    <el-form ref="param" :model="param" :rules="rules"  label-width="120px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="班级名称:" prop="className">
            <el-input v-model="param.className" size="mini" clearable style="width:80%"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="归属学校:" prop="schoolId">
            <!-- <el-input v-model="param.schoolId" size="mini" clearable style="width:80%"></el-input> -->
            <el-select v-model="param.schoolId" placeholder="请选择" size="mini" style="width:80%" clearable>
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row>
        <el-col :span="24">
          <el-form-item label="是否启用:" prop="deleteFlag">
            <el-select v-model="param.deleteFlag" placeholder="请选择" size="mini" style="width:80%" clearable>
              <el-option :value="0" label="是" />
              <el-option :value="1" label="否" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row> -->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="mini" @click="add()">新增</el-button>
      <el-button @click="handCancle" size="mini">取消</el-button>
    </div>
  </div>
</template>

<script>
import { add } from '@/api/class/class'
import { getList, getSch } from '@/api/school/school'

export default {
  props: ['id', 'showDialog'],
  data() {
    return {
      form: {
        name: ''
      },
      value: '',
      options: [],
      schoolId: null,
      // param: {
      //   shcoolName: '',
      //   schoolShortName: '',
      //   schoolIntro: '',
      //   schooIcon: '',
      //   adminAccount: '',
      //   adminPhone: '',
      //   adminName: ''
      // },
      param: {
        className: '',
        schoolId: '',
        deleteFlag: ''
      },
      rules: {
        className: [
          { required: true, message: '请输入班级名称', trigger: 'blur' }
        ],
        schoolId: [
          { required: true, message: '请输入学校简称', trigger: 'blur' }
        ],
        deleteFlag: [
          { required: true, message: '请选择是否启用', trigger: 'change' }
        ],
        // schooIcon: [
        //   { required: true, message: '请上传学校图标', trigger: 'blur' }
        // ],
        // adminAccount: [
        //   { required: true, message: '请输入管理员账号', trigger: 'blur' }
        // ],
        // adminPhone: [
        //    { required: true, message: '请输入管理员手机号', trigger: 'blur' },
        //    { pattern: /^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/, message: '请输入正确的手机号', trigger: 'blur' }
        // ],
        // adminName: [
        //    { required: true, message: '请输入管理员名称', trigger: 'blur' }
        // ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      // getList().then(res => {
      
      // })
      getSch().then(res => {
        let arr = res.data
        let arr1 = []
        for(let i=0;i<arr.length;i++){
          arr1.push({'value': arr[i].id, 'label': arr[i].schoolName})
        }
        console.log(arr1)
        this.options = arr1
      })
    },
    add() {
       this.$refs['param'].validate((valid) => {
          if (valid) {
            add(this.param).then(res => {
              console.log(res)
              if(res.code === 200){
                this.$message.success('新增成功')
                this.$emit('handCancle', 1)
              }
            })
          } else {
            return false;
          }
        })
    },
    handCancle() {
      this.$emit('handCancle')
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>

<style scoped>
.dialog-footer{
  text-align: center;
}
.blod {
  font-weight: bold;
}
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-table th.gutter {
  display: table-cell !important
}
</style>
